<template>
  <div class="departments-container">
    <el-card>
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织架构" name="first" />
      </el-tabs>
      <div class="box">
        <!-- 头部 -->
        <!-- <el-row>
          <el-col :span="20"> 江苏传智播客教育科技股份有限公司</el-col>
          <el-col :span="4">
            <el-row class="right-box">
              <el-col :span="12">负责人</el-col>
              <el-col
                :span="12"
              ><el-dropdown>
                <span class="el-dropdown-link">
                  操作<i class="el-icon-arrow-down el-icon--right" />
                </span>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item>添加子部门</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown></el-col>
            </el-row></el-col>
        </el-row> -->
        <depart :depart="$store.state.departments.depart" />
        <hr>
        <el-tree
          :data="$store.state.departments.list"
          :props="defaultProps"
          default-expand-all
        >
          <template slot-scope="{ data }">
            <!-- <div class="el-row-box"> -->
            <!-- <pre>{{ data }}</pre> -->
            <!-- <el-row>
              <el-col :span="20"> {{ data.name }}</el-col>
              <el-col :span="4">
                <el-row class="right-box">
                  <el-col :span="12">{{ data.manager || '   ' }}</el-col>
                  <el-col
                    :span="12"
                  ><el-dropdown>
                    <span class="el-dropdown-link">
                      操作<i class="el-icon-arrow-down el-icon--right" />
                    </span>
                    <el-dropdown-menu slot="dropdown">
                      <el-dropdown-item>添加子部门</el-dropdown-item>
                      <el-dropdown-item>查看部门</el-dropdown-item>
                      <el-dropdown-item>删除部门</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown></el-col>
                </el-row></el-col>
              </el-row> -->
            <depart :depart="data" :tree-flag="true" />
            <!-- </div> -->
          </template>
        </el-tree>
      </div>
    </el-card>
  </div>
</template>

<script>
// import { getDepartmentList } from '@/api/departments'
// import { todo } from '@/utils/index'
export default {
  name: '',
  data() {
    return {
      activeName: 'first',
      defaultProps: {
        children: 'children',
        label: 'label'
      }
    }
  },
  computed: {},
  created() {
    // this.getDptList()
    this.$store.dispatch('departments/getDptList')
    // console.log(this.$store.slist)
  },
  methods: {}
}
</script>
<style lang="scss" scoped>
.departments-container {
  padding: 20px;
  .el-card {
    padding: 20px;
    .box {
      padding: 40px 60px;
      .right-box {
        text-align: right;
      }
      .el-tree {
        .el-row-box {
          flex: 1;
        }
      }
    }
  }
}
</style>
